<!-- 列表 -->
<template>
  <div class="list">
    <!-- 列表数据 -->
    <div class="ulist">
      <!-- 列表数据 -->
      <div class="list_data">
        <div class="add">
          <el-button type="primary" round @click="addlist()">添加直播间</el-button>
          <div class="search">
            <!-- 添加公告内容 -->
            <div class="s_content">
              <span class="text">直播间标题：</span>
              <el-input type="textarea" autosize placeholder="请输入名称" v-model="search_textarea1"></el-input>
            </div>
            <date-picker-two @fromChild="getChilddpone"></date-picker-two>
            <!-- 显示状态 -->
            <div class="s_stort">
              <span class="text">直播间状态：</span>
              <Select @fromChild="getChilddpthree"  :options="options"></Select>
            </div>
            <el-button type="primary" round @click="search_list()">搜索</el-button>
            <el-button type="success" round @click="q_list()">全部列表</el-button>
            <el-button type="info" round @click="sync()">同步直播间</el-button>
          </div>
        </div>
        <table-list :tableData="tableData" :listHeader="listHeader" @operate="operate" :type="type"></table-list>
        <!-- 分页 -->
        <div class="paging">
          <paging-list @Listdata="getChilddptwo" :addNum="addNum"></paging-list>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import TableList from "../../../components/List/TableList";
import PagingList from "../../../components/List/PagingList";
import DatePickerTwo from "../../../components/screen/DateTimePicker";
import Select from "../../../components/screen//select";
import axios from "axios";
export default {
  data() {
    return {
      placeholder: "请输入手机号", //input框中的placehould
      content: "", //input收入值
      //   value: "", //单时间日期
      Bnumber: 10, //每页条数
      Pnumber: 1, //当前页数
      addNum: 0, //总共多少条数
      selectname: "", //下拉列表内容
      tableData: [], //列表数据
      listHeader: [], //列表的渲染部分
      datas: {}, //列表操作返回的数据
      type: "live_list", //列表类型
      Role_list: [], //可选择角色列表
      show_list: [], //展示列表
      ruleForm: {
        name: ""
      },
      dialogTableVisible: false, //点击展示详情
      dialogTableVisibles: false, //点击修改角色
      ment_list: [], //后台菜单列表
      defaultProps: {
        children: "child",
        label: "name"
      },
      textarea1: "", //公告内容
      value: "", //显示状态
      sort: "", //排序
      search_textarea1: "", //搜索内容
      search_value: "", //搜索状态
      remake: "", //备注内容
      articlename: [], //文章分类名
      imageUrl: "", //公告图标
      img_gg: "", //公告图标地址
      api: "https://api.xujiangyu.com/admin", //上传图片域名
      img_id: "", //图片id
      describe: "", //文章描述
      contents: "", //文章内容
      view_number: "", //查阅人数
      value_text: "", //分类名id
      starttime: "", //搜索起始时间
      endtime: "", //搜索结束时间
      options: [
        {
          value: 101,
          label: "直播中"
        },
        {
          value: 102,
          label: "未开始"
        },
        {
          value: 104,
          label: "禁播"
        },
        {
          value: 103,
          label: "已结束"
        },
        {
          value: 105,
          label: "暂停"
        },
        {
          value: 106,
          label: "异常"
        },
        {
          value: 107,
          label: "已过期"
        }
      ] //传给select选择项
    };
  },
  components: {
    TableList,
    PagingList,
    DatePickerTwo,
    Select
  },
  //生命周期 - 创建完成（访问当前this实例）
  created() {
    this.userAdminList();
    // 获取文章分类名称
    this.$api
      .getArticleCate({
        token: this.publick.token()
      })
      .then(res => {
        let data = res.data;
        let datas = data; //分类页面传来的列表值
        console.log(datas);
        datas.forEach(e => {
          let params = {};
          params.label = e.catename;
          params.value = e.artice_cate_id;
          this.articlename.push(params);
        });
      })
      .catch(res => {
        console.log(res);
      });
  },
  //生命周期 - 挂载完成（访问DOM元素）
  mounted() {
    let header_name = [
      "封面图片",
      "分享图片",
      "房间标题",
      "房间状态",
      "开始时间",
      "结束时间",
      "主播名称",
      "创建时间",
      "课程名称"
    ]; //列表头部
    let list_content = [
      "cover_img",
      "share_img",
      "name",
      "live_status",
      "start_time",
      "end_time",
      "anchor_name",
      "create_time",
      "course_name"
    ]; //列表渲染内容字段
    for (let i = 0; i < header_name.length; i++) {
      let obj = {
        label: header_name[i],
        prop: list_content[i]
      };
      this.listHeader.push(obj);
    }
  },
  methods: {
    //获取分页信息
    getChilddptwo(e) {
      this.Pnumber = e.Pnumber;
      this.Bnumber = e.Bnumber;
    },
    // 获取下拉数据
    getChilddpthree(e) {
      this.search_value = e;
      console.log(e);
    },
    //获取时间
    getChilddpone(v) {
      if (v != null) {
        this.starttime = v[0];
        this.endtime = v[1];
      } else {
        this.starttime = "";
        this.endtime = "";
      }
    },
    //同步直播间操作
    sync() {
      this.$confirm("是否确认同步此直播间?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.$api
            .syncRoomlist({
              token: this.publick.token()
            })
            .then(res => {
              console.log(res);
              this.$message({
                type: "success",
                message: res.message
              });
              this.userAdminList();
            })
            .catch(res => {
              console.log(res);
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消同步"
          });
        });
    },
    //获取详情
    particulars() {
      this.$api
        .articleInfo({
          token: this.publick.token(),
          id: this.datas.artice_id
        })
        .then(res => {
          let data = res.data;
          console.log(data);
          this.textarea1 = data.name;
          this.value = data.is_show + "";
          this.sort = data.sort;
          this.contents = data.content;
          this.img_id = data.image_id;
          this.img_gg = data.image_url;
          this.imageUrl = data.image_url;
          this.view_number = data.view_number;
          this.describe = data.describe;
          this.value_text = data.artice_cate_id;
        })
        .catch(res => {
          console.log(res);
        });
    },
    //获取列表操作的数据
    operate(e) {
      this.datas = e;
      if (this.datas.type == "amend") {
        this.$router.push({
          path: "/Compilelive",
          query: {
            // type为1是添加列表
            id: this.datas.id
          }
        });
      }
    },
    userAdminList() {
      //获取公告列表
      this.$api
        .liveroomList({
          token: this.publick.token(),
          page: this.Pnumber,
          limit: this.Bnumber
        })
        .then(res => {
          console.log(res);
          this.tableData = res.data.data;
          this.addNum = res.data.total;
        })
        .catch(res => {
          console.log(res);
        });
    },
    //提交修改
    submitForm() {
      this.$api
        .articleSave({
          name: this.textarea1,
          is_show: this.value,
          image_id: this.img_id,
          image_url: this.img_gg,
          describe: this.describe,
          content: this.contents,
          view_number: this.view_number,
          token: this.publick.token(),
          sort: this.sort,
          artice_cate_id: this.value_text,
          id: this.datas.artice_id
        })
        .then(res => {
          this.$message({
            type: "success",
            message: res.message
          });
          this.userAdminList();
          this.dialogTableVisibles = false;
        })
        .catch(res => {
          console.log(res);
        });
    },
    //添加列表事件
    addlist() {
      this.$router.push({
        path: "/addlive",
        query: {
          // type为1是添加列表
          type: 1
        }
      });
    },
    // 点击搜索列表
    search_list() {
      //获取公告列表
      this.$api
        .liveroomList({
          token: this.publick.token(),
          page: this.Pnumber,
          limit: this.Bnumber,
          name: this.search_textarea1,
          live_status: this.search_value,
          starttime: this.starttime,
          endtime: this.endtime
        })
        .then(res => {
          console.log(res);
          this.tableData = res.data.data;
          this.addNum = res.data.total;
        })
        .catch(res => {
          console.log(res);
        });
    },
    // 点击恢复全部数据
    q_list() {
      this.userAdminList();
    },
    // 上传图片
    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw);
    },
    // 判断周期图片
    beforeAvatarUpload_one(file) {
      const isJPG = file.type === "image/jpeg";
      const isGIF = file.type === "image/gif";
      const isPNG = file.type === "image/png";
      const isBMP = file.type === "image/bmp";
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG && !isGIF && !isPNG && !isBMP) {
        this.common.errorTip("上传图片必须是JPG/GIF/PNG/BMP 格式!");
      }
      if (!isLt2M) {
        this.common.errorTip("上传图片大小不能超过 2MB!");
      }
      // 上传图片
      var param = new FormData();
      param.append("images", file, file.name);
      param.append("token", this.publick.token());
      let config = {
        headers: {
          "Content-Type": "multipart/form-data"
        }
      };
      axios.post(this.api + "/upimage", param, config).then(response => {
        console.log(response);
        this.img_gg = response.data.data.images;
        this.img_id = response.data.data.images_id;
      });
      return (isJPG || isBMP || isGIF || isPNG) && isLt2M;
    }
  },
  watch: {
    Bnumber(newval) {
      if (newval) {
        this.userAdminList();
      }
    },
    Pnumber(newval) {
      if (newval) {
        this.userAdminList();
      }
    },
    $route: function() {
      if (this.$route.query.type == "addlist") {
        this.userAdminList();
      }
    }
  }
};
</script>
<style scoped>
/* @import url(); 引入css类 */
.list {
  width: 100%;
  height: 89vh;
  background: #fff;
  overflow: auto;
}
.ulist {
  background: #fff;
  width: 98%;
  margin: auto;
  margin-top: 2.5vh;
}
.screen {
  display: flex;
  height: 8vh;
  justify-content: flex-start;
  align-items: center;
}
.list_data {
  width: 98%;
  margin: auto;
  margin-top: 4vh;
}
.paging {
  width: 100%;
  display: flex;
  justify-content: flex-start;
  margin-top: 4vh;
  padding-bottom: 2vh;
}
.add {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.content {
  width: 95%;
  height: 10vh;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.text {
  font-size: 12px;
  min-width: 30%;
  text-align: right;
}
.but {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 20vh;
}
.search {
  flex: 1;
  display: flex;
  justify-content: flex-start;
}
.s_content {
  width: 20%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.s_stort {
  width: 30%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
</style>